<template>
	<view class="canvas-box">
		<canvas class="progress-bg" canvas-id="cpbg"></canvas>
		<canvas class="progress" canvas-id="progress"></canvas>
		<canvas class="progress-text" canvas-id="text"></canvas>
	</view>
</template>

<script>
	export default {
		name: "circle-progress-bar",
		props: {
			progress: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				canvasId: "cpbg",
				size: '',
				num: 350,
				canvasWidth: uni.upx2px(750),
				canvasHeight: uni.upx2px(570),
				x: 0,
				y: 0,
				canvasArea:["良", "轻污染", "中污染", "重污染", "严重污染", "优"],
				canvasColors:[{
					start:"#FDD64D",
					end:"#F0CB48"
				},{
					start:"#FF9B57",
					end:"#FFBA57"
				},{
					start:"#FE6A6A",
					end:"#FE976A"
				},{
					start:"#A87383",
					end:"#BC8F9D"
				},{
					start:"#455869",
					end:"#6E8193"
				},{
					start:"#A8E160",
					end:"#C7E160"
				}],
				canvasProgress: '',
				canvasProgressText: '',
			};
		},
		created() {
			this.size = this.$store.state.screenSize
			this.x = this.canvasWidth / 2
			this.y = this.canvasHeight / 2
			this.circleObj = {
				ctx: '',
				/*圆心*/
				x: 0,
				y: 0,
				/*半径*/
				radius: 102.5, //半径比canvas宽的一半要小
				/*环的宽度*/
				lineWidth: 1,
				startAngle: 0,
				endAngle: Math.PI * 2,
				color:"#EAEAEA"
			}
		},
		mounted(){
			
			this.drawDefaultCanvas()
			this.drawVariety()
		},
		watch: {
			progress() {
				this.progress = this.progress
				this.drawVariety()
			}
		},
		methods: {
			drawDefaultCanvas(){
				let ctx = uni.createCanvasContext("cpbg", this)
				ctx.translate(this.x, 145)
				// 画外圈
				this.drawWrapCircle(ctx)
				// 画进度条底色圈
				this.drawProgressbg(ctx)
				// 画刻度
				this.drawScale(ctx)
				// 画文字区间
				this.drawWrapText(ctx)
				
				ctx.draw()
			},
			drawCircle(circleObj) {
				let ctx = circleObj.ctx;
				ctx.save()
				ctx.beginPath();
				ctx.arc(
					circleObj.x,
					circleObj.y,
					circleObj.radius,
					circleObj.startAngle,
					circleObj.endAngle,
					false
				);
				//设定曲线粗细度
				ctx.lineWidth = circleObj.lineWidth;
				//给曲线着色
				ctx.strokeStyle = circleObj.color;
				//连接处样式
				ctx.lineCap = 'round';
				//给环着色
				
				ctx.stroke();
				ctx.closePath();
			},
			drawWrapCircle(ctx){
				let circleObj = {...this.circleObj}
				circleObj.ctx = ctx
				
				this.drawCircle(circleObj);
			},
			drawProgressbg(ctx){
				let circleObj = {...this.circleObj}
				circleObj.ctx = ctx
				/*灰色的圆环*/
				circleObj.radius = 91
				circleObj.lineWidth = 13
				circleObj.color = "rgba(2, 2, 2, 0.08)";
				this.drawCircle(circleObj);
			},
			drawScale(ctx) {
				for (var i = 0; i < 60; i++) {
					ctx.save()
					ctx.setStrokeStyle("#EAEAEA")
					ctx.rotate(6 * Math.PI / 180 * i)
					ctx.beginPath()
					ctx.setLineWidth(2)
			
					ctx.moveTo(0, -78)
					ctx.lineTo(0, -75)
					ctx.stroke()
					ctx.closePath()
					ctx.restore()
				}
			},
			drawWrapText(ctx) {
				ctx.save()
				var arr = this.canvasArea
				ctx.font = "12px Arial";
				ctx.fillStyle = "#7B93A8"
				ctx.textAlign = 'center';
				ctx.textBaseline = 'middle';
				for (var j = 0; j < arr.length; j++) {
					var rad = Math.PI * 2 / 6 * j;
					var x = Math.cos(rad) * (125);
					var y = Math.sin(rad) * (125);
					ctx.fillText(arr[j], x, y);
				}
				
			},
			
			canvasData(){
				let step = this.progress
				let data = {
					text:'',
					start:'',
					end:'',
					step:step
				}
				
				if (step <= 60) {
					data.text = "优"
					data.start = this.canvasColors[5].start
					data.end = this.canvasColors[5].end
				} else if (step < 120) {
					data.text = "良"
					data.start = this.canvasColors[0].start
					data.end = this.canvasColors[0].end
				} else if (step < 180) {
					data.text = "轻污染"
					data.start = this.canvasColors[1].start
					data.end = this.canvasColors[1].end
				} else if (step < 240) {
					data.text = "中污染"
					data.start = this.canvasColors[2].start
					data.end = this.canvasColors[2].end
				} else if (step < 300) {
					data.text = "重污染"
					data.start = this.canvasColors[3].start
					data.end = this.canvasColors[3].end
				} else {
					data.text = "严重污染"
					data.start = this.canvasColors[4].start
					data.end = this.canvasColors[4].end
				}
				return data
			},
			drawVariety(){
				this.canvasProgress = uni.createCanvasContext("progress", this)
				this.canvasProgressText = uni.createCanvasContext("text", this)
				
				let canvasData =  this.canvasData()
				
				this.drawCenterCircle(canvasData)
				// this.drawState(canvasData)
				this.drawProgress(canvasData)
				
			},
			drawCenterCircle(canvasData){
				let ctx = this.canvasProgressText
				
				ctx.translate(this.x, 145)
				ctx.save()
				ctx.beginPath();
				ctx.arc(
					this.circleObj.x,
					this.circleObj.y,
					67,
					this.circleObj.startAngle,
					this.circleObj.endAngle,
					false
				);
				
				let gradient = ctx.createLinearGradient(this.canvasWidth / 2, 0, 0, this.canvasHeight)
				gradient.addColorStop(0, canvasData.start)
				gradient.addColorStop(1, canvasData.end)
				ctx.fillStyle = gradient
				ctx.fill()
				ctx.closePath();
				ctx.save();
				
				ctx.fillStyle = "#ffffff"
				ctx.font = "30px Arial";
				ctx.textAlign = 'center';
				ctx.textBaseline = 'middle';
				ctx.fillText(canvasData.text, 0, -10);
				
				ctx.font = "17px Arial";
				ctx.textAlign = 'center';
				ctx.textBaseline = 'middle';
				ctx.fillText("AQI", 0, 25);
				
				ctx.draw();
			},
			drawState(canvasData){
				let ctx = this.canvasProgressText
				
				ctx.translate(this.x, 145)
				ctx.font = "17px Arial";
				ctx.textAlign = 'center';
				ctx.textBaseline = 'middle';
				ctx.fillText("IAQ", 0, 20);
				
				ctx.font = "13px Arial";
				ctx.textAlign = 'center';
				ctx.textBaseline = 'middle';
				ctx.fillText("和林新区", 0, 45);
				ctx.draw();
			},
			drawProgress(canvasData){
				let ctx = this.canvasProgress
				
				ctx.translate(this.x, 145)
				let gradient = ctx.createLinearGradient(this.canvasWidth / 2, 0, 0, this.canvasHeight)
				gradient.addColorStop(0, canvasData.start)
				gradient.addColorStop(1, canvasData.end)
				
				
				let increase = 0.05;
				let end = (canvasData.step / 360) * 2 * Math.PI - Math.PI / 2; // 最后的角度
				let current = -Math.PI / 2; // 起始角度
				let timer = setInterval(() => {
					ctx.setLineWidth(13);
					ctx.setStrokeStyle(gradient);
					ctx.setLineCap("round");
					ctx.beginPath();
					// 参数step 为绘制的百分比
					if (current < end) {
						current = current + increase;
					}
					if (current >= end) {
						current = end;
						clearInterval(timer);
					}
					ctx.arc( this.x, 145, 92, -Math.PI / 2, current, false )
				
					ctx.stroke();
					ctx.draw();
				}, 20);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.canvas-box {
		position: relative;
		width: 750upx;
		height: 550upx;
	}

	.progress-bg,
	.progress,
	.progress-text {
		width: 750upx;
		height: 550upx;
	}

	.progress,
	.progress-text {
		position: absolute;
		top: 0;
		left: 0;
	}

	.progress-box {
		position: relative;
		padding: 60upx;
	}

	.progress-item {
		width: 50%;
		margin-bottom: 80upx;
		color: #FFFFFF;
		box-sizing: border-box;

		&:nth-child(odd) {
			padding-right: 40upx;
		}

		&:nth-child(even) {
			padding-left: 40upx;
		}

		.title {
			font-size: 34upx;
			font-weight: 500;
		}

		.sub-title {
			font-size: 28upx;
			font-weight: 500;
		}

		.num {
			margin-right: 24upx;
			font-size: 60upx;
		}

		/deep/ .uni-progress-bar {
			border-radius: 5px;
			overflow: hidden;
		}

		uni-progress {
			margin-top: 18upx;
			// width: 276upx;
		}
	}
</style>
